<template>
  <div class="permission_change_module" @click.stop>
    <div v-if="status" class="button" @click="enableEdit">
      <i class="iconfont icon-to-do"></i>
    </div>
    <div v-else class="edit">
      <i class="iconfont icon-arrow-left" @click="num--" />
      <span>{{ num }}</span>
      <i class="iconfont icon-arrow-right" @click="num++" />
      <i class="iconfont icon-close" @click="status = true"></i>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Emit, Prop, Watch } from 'vue-property-decorator'
@Component
class PermissionChange extends Vue {
  @Prop({ default: true }) initDisabled!: boolean
  @Prop({ default: 0 }) min!: number
  @Prop({ default: 10 }) max!: number
  @Prop({ required: true }) name!: string
  @Prop() BeforeEdit!: (name: string) => Promise<boolean>
  status: boolean = this.initDisabled
  num: number = 0
  @Watch('num')
  @Emit('onNumChange')
  n_handler(newVal: number) {
    if (newVal < this.min) newVal = this.max
    if (newVal > this.max) newVal = this.min
    this.num = newVal
    return {
      num: String(newVal),
      key: this.name
    }
  }
  enableEdit() {
    if (!this.BeforeEdit) {
      this.status = false
    }
    const before = this.BeforeEdit(this.name)
    if (before && before.then) {
      before.then(() => {
        this.status = false
      })
    }
  }
}
export default PermissionChange
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.permission_change_module {
  .button {
    i {
      font-size: 18px;
    }
  }
  .edit {
    i {
      padding: 2px;
      margin: 0 2px;
      border-radius: 2px;
      color: #ffffff;
      transition: all 0.2s ease;
      #color(background-color, --primary-blue-color);
    }
    i:hover {
      #color(background-color, --heavier-blue-color);
    }
    span {
      margin: 0 3px;
      font-size: 16px;
      font-weight: 800;
      #color(color, --primary-scroll-color);
    }
  }
}
</style>
